import type { FormItem } from '@/components/FormDialog/data';
import ToeForm from '@/components/FormDialog/index';
import {
  addDictionary,
  delDictionary,
  getDictionaryByPage,
  updateDictionary,
} from '@/services/baseData/dictionary';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, message, Modal, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import { history } from 'umi';
//
const Dictionary: React.FC<{}> = () => {
  const [formVisit, setFormVisit] = useState(false); // 新建和编辑提示框
  const [formTitle, setFormTitle] = useState('新建数据字典'); //
  const [rowData, setRowData] = useState({ id: '' }); // 保存行值
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();
  const formRef = useRef(null);
  const [formDisabled, setFormDisabled] = useState(false); //设置表单禁用

  /**
   * 穿梭框的数据设置
   */
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    // {
    //   title: '数据字典编码', //表头显示的名称
    //   dataIndex: 'id', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    //   search: false,
    //   render: (text, record, _, action) => (
    //     <a
    //       key="editKey"
    //       onClick={() => {
    //         // console.log(record, '----测试----');
    //         // 编辑用户
    //         history.push({
    //           pathname: `/basicData/dictionaryItem`,
    //           query: {
    //             dictionaryId: record.id,
    //           },
    //         });
    //       }}
    //     >
    //       {text}
    //     </a>
    //   ),
    // },

    {
      title: '数据字典编码', //表头显示的名称
      dataIndex: 'code', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      search: false,
      render: (text, record, _, action) => (
        <a
          key="editKey"
          onClick={() => {
            // console.log(record, '----测试----');
            // 编辑用户
            history.push({
              pathname: `/basicData/dictionaryItem`,
              query: {
                dictionaryId: record.id,
              },
            });
          }}
        >
          {text}
        </a>
      ),
    },
    {
      title: '字典名称', //表头显示的名称
      dataIndex: 'name', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '字典类别', //表头显示的名称
      dataIndex: 'type', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '是否系统预设', //表头显示的名称
      dataIndex: 'sysPresetFlag', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      search: false,
      render: (_, record) => (
        <Tag color={record.sysPresetFlag ? 'green' : 'blue'}>
          {record.sysPresetFlag ? '是' : '否'}
        </Tag>
      ),
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            // 编辑
            setFormVisit(true);
            setFormDisabled(true);
            // setCreateOrUpdate(true);
            setFormTitle('编辑数据字典');
            form.setFieldsValue({
              name: record.name,
              id: record.id,
              // type:record.type,
              // sysPresetFlag:record.sysPresetFlag,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除数据字典',
              content: '确定删除',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delDictionary({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  // const formColums: FormItem[] = [{ field: 'code', label: '数据字典编码', type: 'inputNumber' }];
  const formColums: FormItem[] = [
    { field: 'id', label: 'id', hidden: true },
    { field: 'code', label: '字典编码' },
    { field: 'name', label: '字典名称' },
    { field: 'type', label: '字典类型' },
    { field: 'sysPresetFlag', label: '是否系统预设' },

    { field: 'memo', label: '备注' },
  ];
  const handleSubmit = async () => {
    if (formTitle == '新建数据字典') {
      console.log(formRef.current.getFieldsValue());
      debugger;
      await addDictionary(formRef.current.getFieldsValue());
    } else {
      await updateDictionary(formRef.current.getFieldsValue());
    }

    message.success('添加成功');
    setFormVisit(false);
    // 这个爆红不用管(从新加载页面)
    actionRef.current.reload();
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable //表格Pro组件
        headerTitle="数据字典总览" //表头
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              // 1.清空form
              formRef.current.resetFields();
              setFormDisabled(false);
              setFormVisit(true);
              setFormTitle('新建数据字典');
              // console.log(selectedRows, '---选取多行----');
              // 1.清空form
              // setCreateOrUpdate(false);
              // setFormTitle('新建数据字典');
              // form.resetFields();
              // //
              // setModalVisit(true);
              // setFormVisit(true);
            }}
            type="primary"
          >
            新建数据字典
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          console.log(params, sort, filter);
          const result = await getDictionaryByPage(params);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
          // return  await new Promise({data:[{loginName:}], total:10, success: 0})
          // return {data:[], total:10, success: 0}
        }} //请求数据的地方，例子是用mock模拟数据，我是在后台请求的数据
        columns={columns} //上面定义的
        rowSelection={{}}
      />

      <ToeForm
        visible={formVisit}
        title="新建数据字典"
        disable={false}
        ref={formRef}
        columns={formColums}
        onCancel={() => {
          setFormVisit(false);
        }}
        onOk={handleSubmit}
        // onOk={() => {
        // handleSubmit
        //formRef.current.getFormData();
        // formRef.current.resetFields();
        // setFormDisabled(false);
        // setFormVisit(true);
        // setFormTitle('新建数据字典');
      />
    </PageHeaderWrapper>
  );
};

export default Dictionary;
